<template>
  <view class="myPoint">

    <view class="header">
      <view class="point">当前积分：
        <text v-if="points==-1">...</text>
        <u-count-to v-else start-val="0" :end-val="points" separator="," color="#fff" font-size="18" />
      </view>
      <view class="desc" @tap="toDesc">积分说明>></view>
    </view>

    <u-tabs :list="tabList" line-width="30" item-style="height: 44px;width: 45%;" scrollable="false" :active-style="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}" :inactive-style="{color: '#606266',transform: 'scale(1)'}" @click="switchTab" />

    <view class="table">
      <u-row align="center" gutter="10" custom-style="margin-bottom: 10px">
        <u-col text-align="center" span="4">
          <view class="text">交易时间</view>
        </u-col>
        <u-col text-align="center" span="4">
          <view class="text">途径</view>
        </u-col>
        <u-col text-align="center" span="4">
          <view class="text">获得积分</view>
        </u-col>
      </u-row>
      <u-row v-for="(item, index) in tableData" :key="index" class="table row" gutter="10">
        <u-col text-align="center" span="4">
          <view class="text">{{ item.updateTime }}</view>
        </u-col>
        <u-col text-align="center" span="4">
          <view class="text">{{ item.channel }}</view>
        </u-col>
        <u-col text-align="center" span="4">
          <view class="text">{{ item.points }}</view>
        </u-col>
      </u-row>
    </view>

    <!-- 无商品显示 -->
    <view v-if="tableData.length===0" class="empty">
      <view class="img">
        <image src="https://mm.wentsoft.com/images/empty-img/not-found.png" />
      </view>
      <view class="text">没有找到数据</view>
    </view>
    <u-loadmore v-else :status="loadMoreStatus" color="#999" margin-top="40" height="20" line-color="#999" dashed />
  </view>
</template>

<script>
import { userPointsBalancePointsBalance, pointsRedeemRecordInPage, pointsRedeemRecordOutPage } from '@/api/api1'
export default {
  components: {},
  data() {
    return {
      points: -1,
      tabList: [], // 分类
      currentTab: 1, // 选中的分类项(默认为第一个分类)
      searchTableQuery: {
        size: 10,
        current: 1
      },
      searchTableData: {
        records: [],
        total: 0, // 总数
        pages: 0 // 总页数
      },
      tableData: [], // 列表
      loadMoreStatus: 'loadmore',
      loading: false
    }
  },

  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLoginAndHasMallInfo() {
      return this.$store.getters.hasLoginAndHasMallInfo
    }
  },

  onLoad() {
    const that = this
    // 如果没有mall信息->去登陆页面
    if (!that.hasLoginAndHasMallInfo) {
      return uni.$u.route('/pages/login/index')
    }
    // 查询积分
    that.getPoint()
    // 设置tab 查询tab数据
    that.getSection()
  },

  onReachBottom() {
    if (this.searchTableQuery.current < this.searchTableData.pages) {
      this.searchTableQuery.current = this.searchTableQuery.current + 1
      this.getSearchList()
    } else {
      this.loadMoreStatus = 'nomore'
    }
  },

  methods: {
    getSection() {
      this.tabList = [
        {
          id: 1,
          name: '积分收入'
        }, {
          id: 2,
          name: '积分支出'
        }
      ]
      this.currentTab = 1
      this.getSearchList()
    },
    getPoint() {
      const that = this
      userPointsBalancePointsBalance(
        { cardNo: this.userInfo.cardNo }
      ).then(res => {
        that.points = res.data
      })
    },
    switchTab(e) {
      if (this.currentTab === e.id) {
        return
      }
      this.currentTab = e.id
      this.searchTableQuery.current = 1
      this.searchTableQuery.cardNo = this.userInfo.cardNo
      this.searchTableData = {
        records: [],
        total: 0,
        pages: 0
      }
      this.tableData = []
      this.loadMoreStatus = 'loadmore'
      this.getSearchList()
    },
    getSearchList() {
      const that = this
      that.loadMoreStatus = 'loading'
      that.searchTableQuery.cardNo = this.userInfo.cardNo
      that.isLoadAll = false
      that.loading = true
      if (that.currentTab === 1) {
        pointsRedeemRecordInPage(
          that.searchTableQuery
        ).then(res => {
          that.loading = false
          that.loadMoreStatus = 'loadmore'
          that.handle('积分收入', res)
        })
      } else if (that.currentTab === 2) {
        pointsRedeemRecordOutPage(
          that.searchTableQuery
        ).then(res => {
          that.loading = false
          that.loadMoreStatus = 'loadmore'
          that.handle('积分支出', res)
        })
      }
    },
    handle(desc, res) {
      const that = this
      that.searchTableData = {
        records: res.data.records,
        total: res.data.total, // 总数
        pages: res.data.pages // 总页数
      }
      const resList = res.data.records
      console.info(desc + '列表数据：', resList)
      that.tableData = that.tableData.concat(resList)
      if (res.data.current === res.data.pages) {
        this.loadMoreStatus = 'nomore'
      }
    },
    toDesc() {
      // uni.$u.route('')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  @include flex-space-between;
  /* 渐变背景黑 */
  height: 120rpx;
  border-radius: 10rpx;
  background-color: #d8d8d8;
  background: linear-gradient(294deg, #6d6d6d 0%, #000 100%);

  padding: 0 40rpx;
  font-size: 28rpx;
  color: white;
}

.table {
  background-color: #f0f0f0;
  .text {
    height: 53rpx;
    line-height: 53rpx;
    font-size: 26rpx;
  }
}
</style>
